<template>

  <div class="app-container calendar-list-container">
<!--会员服务不同时间卡片显示-->
    <el-tabs>
      <!--tab1-->
      <el-tab-pane label="会员服务">
        <div class="box" @click="card_detail">
          <div class="column">
            <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>今天</span>
            </div>
            <div class="card_sign">
              <p>签到总数</p>
              <p class="card_number">{{userForm.today_num}}</p>
              <div class="card_sex">
                <div>
                  <span>男</span>
                </div>
                <div>
                  <span>1248</span>
                </div>|
                <div>
                  <span>女</span>
                </div>
                <div>
                  <span>1843</span>
                </div>
              </div>
            </div>
          </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>昨天</span>
              </div>
              <div class="card_sign">
                <p>签到总数</p>
                <p class="card_number">11111</p>
                <div class="card_sex">
                  <div>
                    <span>男</span>
                  </div>
                  <div>
                    <span>1248</span>
                  </div>|
                  <div>
                    <span>女</span>
                  </div>
                  <div>
                    <span>1843</span>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <div class="box" @click="card_detail">
          <div class="column">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>本周</span>
              </div>
              <div class="card_sign">
                <p>签到总数</p>
                <p class="card_number">11111</p>
                <div class="card_sex">
                  <div>
                    <span>男</span>
                  </div>
                  <div>
                    <span>1248</span>
                  </div>|
                  <div>
                    <span>女</span>
                  </div>
                  <div>
                    <span>1843</span>
                  </div>
                </div>
              </div>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>本月</span>
              </div>
              <div class="card_sign">
                <p>签到总数</p>
                <p class="card_number">11111</p>
                <div class="card_sex">
                  <div>
                    <span>男</span>
                  </div>
                  <div>
                    <span>1248</span>
                  </div>|
                  <div>
                    <span>女</span>
                  </div>
                  <div>
                    <span>1843</span>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        today_num: '55565'
      }
    }
  },
  methods: {
    card_detail() {
      this.$router.push({ path: '/cardDetail' })
    }
  }
}
</script>

<style scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .clearfix span{
    line-height: 20px;
    font-size: 25px;
    color: white;
  }
  .box-card {
    width: 480px;
    margin: 20px 30px;
  }
  .card_number{
    text-align: center;
    font-size: xx-large;
  }
  .card_sex{
    display: -webkit-flex;
    justify-content: space-around;
  }
  .card_sex span{
    font-size: 24px;
  }
  .box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .column {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
<style>
  .box-card .el-card__header{
    background-color: #6883a9;
  }
</style>

